<template>
  <div id="cityAlphabet">
      <ul class="list">
        <li class="item" 
        v-for="(item,index) in  letter" 
        :key="index"
        @click="click"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        :ref="item"
        >{{item}}</li>

      </ul>
  </div>
</template>

<script>
export default {
  name: 'cityAlphabet',
  props:['cities'],
  computed:{
    letter(){
      const letter=[]
      for(let i in this.cities){
        letter.push(this.cities[i].initial)
      }
      return letter
    }
  },
  data(){
    return{
      touchStatus:false,//状态
      timer:null
    }
  },
  methods:{
    click(e){
      console.log(e.target.innerText)
      this.$emit('change',e.target.innerText)
      // console.log(e.target.innerHTML)
    },
    touchStart(){//监听手指触摸到屏幕
      this.touchStatus = true
    },
    touchMove(e){//监听手指拖拽
      if(this.touchStatus){//当手指触摸屏幕
        if(this.timer){//timer==true
          clearTimeout(this.timer)
        }
        this.timer=setTimeout(()=>{
          const moveY = e.touches[0].clientY-150 //获取手指触摸的位置 减去距离顶部y的位置
          const index = Math.floor(moveY/20);//计算当前触摸字母的索引
          console.log(index)
          if(index>=0 && index<=this.letter.length){
            this.$emit('change',this.letter[index])
          }
        },16)
      }
    },
    touchEnd(){//监听手指离开屏幕
      this.touchStatus = false
    }
    
  }
};
</script>

<style scoped>
 #cityAlphabet{
 }
.list{
  position: fixed;
  top: 3rem;
  right: 0;
  width: .6rem;
  z-index: 99;
}
.list .item{
  text-align: center;
  line-height: .4rem;
  color: #FFFFFF;
}
</style>
